<template>
  <el-table :data="filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column label="日期" prop="Date" />
    <el-table-column label="楼盘名称" prop="Type" />
    <el-table-column label="房源类型" prop="Address" />
    <el-table-column label="门牌号" prop="HomeNumber" />
    <el-table-column label="房源户型" prop="HouseSize" />
    <el-table-column label="户主"  prop="Host" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
  <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="$store.state.homeview.tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />

    <AlertBox></AlertBox>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue"
import { useStore } from "vuex";
import AlertBox from "../../components/AlertBox.vue";
import { formContextKey } from "element-plus";


//页面引用
// 引用useStore
// 得到store对象
const store = useStore();



interface User {
  Date: string
  Type: string
  Address: string
  HomeNumber: number
  HouseSize: string
  Host: string
}
const search = ref('')
// 使用计算属性处理数据
const filterTableData = computed(() =>
 store.state.homeview.tableData.filter(
    (data) =>
      !search.value ||
      data.Host.toLowerCase().includes(search.value.toLowerCase())
  )
)

//在组件的修改按钮调用函数中添加commit
const handleEdit = (index: number, row: User) => {
  // 调用vuex修改
  store.commit("SET_DIALOG")
  console.log(index, row)
  store.commit("SET_INDEX", index)
  store.commit('SHOW_THINGS', row)
  
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
  store.commit("SET_DEL",index)
}
// 设置需要的参数与方法
const currentPage4 = ref(1)
const pageSize4 = ref(10)
// 修改下面得方法
const handleSizeChange = (val: number) => {
  //一页显示多少条
  pageSize4.value = val;
}
const handleCurrentChange = (val: number) => {
  //页码更改方法
  currentPage4.value = val;
}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if ((rowIndex + 1) % 2 === 0) {
  return 'warning-row';
}
return 'success-row';
 }


</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
